<ol class="breadcrumb">
    <li><?php echo $this->Html->link("<i class='fa fa-dashboard'></i> Home", array('controller' => 'homes', 'action' => 'index'), array('escape' => FALSE)); ?></li>
    <li class="active">Charts</li>
</ol>

<div style = "width : 600px;height:600px;margin:0 auto;">
	<h2>Meilleures ventes</h2>
	<canvas id="bestventes" height="500" width="500"></canvas>
</div>

<br/>
<br/>
<div style = "width : 600px;height:600px;margin:0 auto;">
	<h2>Nombre de ventes par catégorie</h2>
	<canvas id="nbrventescat" height="500" width="500"></canvas>
</div>
<br/>
<br/>
<div style = "width : 600px;height:600px;margin:0 auto;">
	<h2>Nombre de produits par categorie</h2>
	<canvas id="prodcat" height="500" width="500"></canvas>
</div>
<br/>
<br/>
<div style = "width : 600px;height:600px;margin:0 auto;">
	<h2>Nombre de ventes par pays</h2>
	<canvas id="ventespays" height="500" width="500"></canvas>
</div>
<br/>
<br/>
<div style = "width : 600px;height:600px;margin:0 auto;">
	<h2>Moyenne d'age des acheteurs par categorie</h2>
	<canvas id="agecat" height="500" width="500"></canvas>
</div>


<script>
	var lineChartData = {
		labels : <?=$bvKeys?>,
		datasets : [
			{
				label: "Meilleures ventes",
				fillColor: "rgba(220,220,220,0.5)",
            	strokeColor: "rgba(220,220,220,0.8)",
            	highlightFill: "rgba(220,220,220,0.75)",
            	highlightStroke: "rgba(220,220,220,1)",
				data : <?=$bvVals?>
		}]
	}

	var lineChartData2 = {
		labels : <?=$vcKeys?>,
		datasets : [
			{
				label: "Ventes par categorie",
				fillColor: "rgba(220,220,220,0.5)",
            	strokeColor: "rgba(220,220,220,0.8)",
            	highlightFill: "rgba(220,220,220,0.75)",
            	highlightStroke: "rgba(220,220,220,1)",
				data : <?=$vcVals?>
		}]
	}

	var lineChartData3 = {
		labels : <?=$pcKeys?>,
		datasets : [
			{
				label: "Produits par categorie",
				fillColor: "rgba(220,220,220,0.5)",
            	strokeColor: "rgba(220,220,220,0.8)",
            	highlightFill: "rgba(220,220,220,0.75)",
            	highlightStroke: "rgba(220,220,220,1)",
				data : <?=$pcVals?>
		}]
	}

	var lineChartData4 = {
		labels : <?=$vpKeys?>,
		datasets : [
			{
				label: "Ventes par pays",
				fillColor: "rgba(220,220,220,0.5)",
            	strokeColor: "rgba(220,220,220,0.8)",
            	highlightFill: "rgba(220,220,220,0.75)",
            	highlightStroke: "rgba(220,220,220,1)",
				data : <?=$vpVals?>
		}]
	}		

	var lineChartData5 = {
		labels : <?=$acKeys?>,
		datasets : [
			{
				label: "Age par categories",
				fillColor: "rgba(220,220,220,0.5)",
            	strokeColor: "rgba(220,220,220,0.8)",
            	highlightFill: "rgba(220,220,220,0.75)",
            	highlightStroke: "rgba(220,220,220,1)",
				data : <?=$acVals?>
		}]
	}	

	window.onload = function(){
		var ctx = document.getElementById("bestventes").getContext("2d");
		window.myLine = new Chart(ctx).Bar(lineChartData, {
			responsive: true
		});
		var ctx = document.getElementById("nbrventescat").getContext("2d");
		window.myLine = new Chart(ctx).Bar(lineChartData2, {
			responsive: true
		});
		var ctx = document.getElementById("prodcat").getContext("2d");
		window.myLine = new Chart(ctx).Bar(lineChartData3, {
			responsive: true
		});
		var ctx = document.getElementById("ventespays").getContext("2d");
		window.myLine = new Chart(ctx).Bar(lineChartData4, {
			responsive: true
		});
		var ctx = document.getElementById("agecat").getContext("2d");
		window.myLine = new Chart(ctx).Bar(lineChartData5, {
			responsive: true
		});
	}
</script>

